```vue
<template>
  <div class="page-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>订单管理</span>
          <el-button type="primary" size="small" @click="refresh">刷新</el-button>
        </div>
      </template>
      
      <div class="table-container">
        <el-table
          :data="orders"
          style="width: 100%"
          border
          class="order-table"
          stripe
          :height="tableHeight"
        >
          <el-table-column prop="orderSn" label="订单编号" width="140" />
          <el-table-column prop="skuName" label="商品名称" min-width="180" />
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column prop="payAmount" label="实付金额" width="100">
            <template #default="scope">
              ¥{{ scope.row.payAmount != null ? Number(scope.row.payAmount).toFixed(2) : '0.00' }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="订单状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ formatOrderStatus(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="paymentStatus" label="支付状态" width="100">
            <template #default="scope">
              <el-tag :type="getPaymentStatusTagType(scope.row.paymentStatus)">
                {{ formatPaymentStatus(scope.row.paymentStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="logisticsStatus" label="物流状态" width="100">
            <template #default="scope">
              <el-tag :type="getDeliveryStatusTagType(scope.row.status)">
                {{ formatDeliveryStatus(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="scope.row.paymentStatus === 1 ? handleShipOrder(scope.row) : viewDetails(scope.row)"
              >
                {{ scope.row.paymentStatus === 1 ? '发货' : '详情' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
          @current-change="fetchOrders"
          class="pagination"
        />
      </div>

      <!-- 发货弹框 -->
      <el-dialog
        title="发货"
        v-model="dialogVisible"
        width="30%"
        :before-close="handleCloseDialog"
      >
        <el-form :model="shipForm" :rules="shipRules" ref="shipFormRef" label-width="100px">
          <el-form-item label="收货人姓名">
            <el-input v-model="shipForm.receiverName" disabled />
          </el-form-item>
          <el-form-item label="收货人电话">
            <el-input v-model="shipForm.receiverPhone" disabled />
          </el-form-item>
          <el-form-item label="收货地址">
            <el-input v-model="shipForm.receiverAddress" disabled />
          </el-form-item>
          <el-form-item label="物流单号" prop="deliverySn">
            <el-input v-model="shipForm.deliverySn" placeholder="请输入物流单号" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleCloseDialog">取消</el-button>
            <el-button type="primary" @click="submitShipOrder">确认发货</el-button>
          </span>
        </template>
      </el-dialog>
	  
	  
	  <!-- 详情弹框 -->
	        <el-dialog
	          title="订单详情"
	          v-model="detailDialogVisible"
	          width="30%"
	          :before-close="handleCloseDetailDialog"
	        >
	          <el-form :model="detailForm" label-width="100px">
	            <el-form-item label="订单编号">
	              <el-input v-model="detailForm.orderSn" disabled />
	            </el-form-item>
	            <el-form-item label="收货人姓名">
	              <el-input v-model="detailForm.receiverName" disabled />
	            </el-form-item>
	            <el-form-item label="收货人电话">
	              <el-input v-model="detailForm.receiverPhone" disabled />
	            </el-form-item>
	            <el-form-item label="收货地址">
	              <el-input v-model="detailForm.receiverAddress" disabled />
	            </el-form-item>
	            <el-form-item label="物流单号">
	              <el-input v-model="detailForm.deliverySn" disabled />
	            </el-form-item>
	          </el-form>
	          <template #footer>
	            <span class="dialog-footer">
	              <el-button @click="handleCloseDetailDialog">关闭</el-button>
	            </span>
	          </template>
	        </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getMerchantOrdersService, shipOrderService } from '@/api/merchant'
import { useUserInfoStore } from '@/stores/userInfo'

const userInfoStore = useUserInfoStore()
const orders = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const windowHeight = ref(window.innerHeight)
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const shipFormRef = ref(null)
const shipForm = ref({
  orderId: null,
  deliverySn: '',
  receiverName: '',
  receiverPhone: '',
  receiverAddress: ''
})

const detailForm = ref({
  orderSn: '',
  receiverName: '',
  receiverPhone: '',
  receiverAddress: '',
  deliverySn: ''
})

const shipRules = {
  deliverySn: [
    { required: true, message: '请输入物流单号', trigger: 'blur' },
    { min: 1, max: 50, message: '物流单号长度为1-50个字符', trigger: 'blur' }
  ]
}

const tableHeight = computed(() => {
  const cardHeaderHeight = 65
  const paginationHeight = 65
  const buffer = 4
  const containerHeight = windowHeight.value - 120
  return containerHeight - cardHeaderHeight - paginationHeight - buffer
})

const handleResize = () => {
  windowHeight.value = window.innerHeight
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const fetchOrders = async () => {
  try {
    const res = await getMerchantOrdersService(
      userInfoStore.userInfo.id,
      currentPage.value,
      pageSize.value
    )
	console.log(res)
  console.log(userInfoStore.userInfo.id)
    orders.value = res.data.data.records.map(order => ({
      orderId: order.id,
      orderSn: order.orderSn || order.order_sn || '',
      skuName: order.items && order.items.length > 0 ? order.items[0].skuName || order.items[0].sku_name || '-' : '-',
      quantity: order.items && order.items.length > 0 ? order.items[0].quantity || 0 : 0,
      payAmount: order.payAmount != null ? Number(order.payAmount) : 0,
      status: order.status || 0,
      paymentStatus: order.paymentStatus || 0,
      logisticsStatus: order.status != null ? order.logisticsStatus : 0,
      receiverInfo: order.receiverInfo ,// 新增 receiverInfo
	  deliverySn: order.deliverySn
    }))
    console.log(orders, 100)
    total.value = res.data.total
  } catch (error) {
    ElMessage.error('获取订单失败')
    console.error(error)
  }
}

const formatOrderStatus = (status) => {
  switch (status) {
    case -1 : return '已拼团'
    case 0: return '待付款'
    case 1: return '待发货'
    case 2: return '已发货'
    case 3: return '已完成'
    case 4: return '已取消'
    case 5: return '待退款'
    case 6: return '已退款'
    case 7: return '退款失败'
    default: return '-'
  }
}

const getStatusTagType = (status) => {
  switch (status) {
    case 0: return 'warning'
    case 1: return 'info'
    case 2: return 'primary'
    case 3: return 'success'
    case 4: return 'danger'
    default: return ''
  }
}

const formatPaymentStatus = (status) => {
  switch (status) {
    case 0: return '待支付'
    case 1: return '已支付'
    case 2: return '已支付'
    case 3: return '已支付'
    case 4: return '已取消'
    default: return '已支付'
  }
}

const getPaymentStatusTagType = (status) => {
  switch (status) {
    case 0: return 'warning'
    case 1: return 'success'
    case 2: return 'success'
    case 3: return 'success'
    case 4: return 'info'
    default: return ''
  }
}

const formatDeliveryStatus = (status) => {
  switch (status) {
    case 0: return '未发货'
    case 1: return '未发货'
    case 2: return '已发货'
    default: return '已签收'
  }
}

const getDeliveryStatusTagType = (status) => {
  switch (status) {
    case 0: return 'warning'
    case 1: return 'warning'
    case 2: return 'success'
    default: return 'success'
  }
}

const viewDetails = (row) => {
  try {
      const receiverInfo = JSON.parse(row.receiverInfo || '{}')
	  console.log(row.deliverySn)
      detailForm.value = {
        orderSn: row.orderSn,
        receiverName: receiverInfo.receiverName || '未知',
        receiverPhone: receiverInfo.receiverPhone || '未知',
        receiverAddress: receiverInfo.receiverAddress || '未知',
        deliverySn: row.deliverySn || '未填写'
      }
      detailDialogVisible.value = true
    } catch (error) {
      ElMessage.error('解析订单详情失败')
      console.error(error)
    }
}


//这里是转Json 到页面显示数据
// json 格式：{"receiverName": 1, "receiverPhone": 11, "receiverAddress": 1212}
const handleShipOrder = (row) => {
  try {
    const receiverInfo = JSON.parse(row.receiverInfo || '{}')
    shipForm.value = {
      orderId: row.orderId,
      deliverySn: '',
      receiverName: receiverInfo.receiverName || '未知',
      receiverPhone: receiverInfo.receiverPhone || '未知',
      receiverAddress: receiverInfo.receiverAddress || '未知'
    }
    dialogVisible.value = true
  } catch (error) {
    ElMessage.error('解析收货信息失败')
    console.error(error)
  }
}

const handleCloseDialog = () => {
  dialogVisible.value = false
  shipFormRef.value?.resetFields()
}

const handleCloseDetailDialog = () => {
  detailDialogVisible.value = false
}

const submitShipOrder = () => {
  shipFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await shipOrderService({
          orderId: shipForm.value.orderId,
          deliverySn: shipForm.value.deliverySn
        })
        ElMessage.success('发货成功')
        dialogVisible.value = false
        shipFormRef.value.resetFields()
        refresh()
      } catch (error) {
        ElMessage.error('发货失败')
        console.error(error)
      }
    }
  })
}

const refresh = () => {
  currentPage.value = 1
  fetchOrders()
}

onMounted(() => {
  fetchOrders()
})
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.box-card {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  :deep(.el-card__header) {
    padding: 0;
    border-bottom: 1px solid #ebeef5;
  }
  
  :deep(.el-card__body) {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.card-header {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafafa;
}

.table-container {
  flex: 1;
  overflow: hidden;
  padding: 0 1px;
}

.order-table {
  :deep(.el-table__header-wrapper) {
    th {
      background-color: #fafafa;
      color: #606266;
      font-weight: 500;
    }
  }
  
  :deep(.el-table__body-wrapper) {
    max-height: none;
  }
}

.pagination-container {
  padding: 16px 24px;
  background-color: #fafafa;
  border-top: 1px solid #ebeef5;
  flex-shrink: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  
  :deep(.el-pagination) {
    .el-pagination__total {
      margin-right: auto;
    }
  }
}

@media (max-width: 768px) {
  .card-header {
    padding: 16px;
    font-size: 16px;
  }
  
  .pagination-container {
    padding: 12px 16px;
  }
}
</style>
```